 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Microsoft YaHei", sans-serif;
 }

 body {
     background-color: #f5f5f5;
     color: #333;
 }

 #index {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 15px;
     grid-template-rows: auto auto auto auto auto auto;
     grid-template-areas:
         "header header header"
         "box1 box1 box1"
         "box2 box2 box3"
         "box4 box5 box6"
         "box7 box8 box8"
         "box9 box9 box9";
 }

 .box {
     background-color: rgb(247, 247, 247);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     overflow: hidden;
 }

 /* 头部样式 */
 .header {
     grid-area: header;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     padding: 10px 0;
     background-color: white;
     color: white;
 }

 .imgHeader {
     display: flex;
     align-items: center;
     margin-left: 20px;
 }

 .imgHeader img {
     height: 60px;
     margin-right: 20px;
 }

 .header1 {
     margin-left: auto;
     margin-right: 20px;
 }

 .box4H2 {
     margin-left: 25px;
     margin-top: 15px;
 }

 .daohangHeade2 {
     width: 300px;
     height: 36px;
     border: 1px solid black;
     border-radius: 18px;
     padding: 0 15px;
     font-size: 14px;

 }

 .daohangHeader {
     width: 300px;
     height: 36px;
     border: 1px solid black;
     border-radius: 18px;
     padding: 0 15px;
     font-size: 14px;
 }

 .header2 {
     flex: 1 0 100%;
     background-color: white;
 }

 .header2 ul {
     list-style: none;
     display: flex;
     justify-content: center;
     padding: 10px 0;
 }

 .header2 li {
     color: black;
     padding: 0 15px;
     font-size: 16px;
     cursor: pointer;
 }

 .header2 li:hover {
     color: #ffde00;
 }

 /* 主要内容区域 */
 .box1 {
     grid-area: box1;
     padding: 20px;
     text-align: center;
 }

 .box1 h2 {
     color: #1a56a8;
     margin-bottom: 15px;
     font-size: 24px;
     font-weight: normal;
 }

 .memo {
     color: #666;
 }

 .memo a {
     color: #1a56a8;
     text-decoration: none;
     margin: 0 10px;
 }

 .memo a:hover {
     text-decoration: underline;
 }

 /* 新闻图片区域 */
 .box2 {
     grid-area: box2;
     padding: 10px;
 }

 .box2P1 img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* 右侧新闻列表 */
 .box3 {
     grid-area: box3;
     padding: 15px;
 }

 .news-list {
     margin-left: 5px;
     /* list-style: none; */
 }

 .news-list li {
     padding: 10px 0;
     border-bottom: 1px dashed #eee;
 }

 .news-list li:last-child {
     border-bottom: none;
 }

 .news-list a {
     color: black;
     text-decoration: none;
     display: block;
 }

 .news-list a:hover {
     color: #e4393c;
     text-decoration: underline;
 }

 .news-date {
     color: #999;
     font-size: 12px;
     margin-left: 10px;
 }

 /* 三栏内容区域 */
 .box4,
 .box5,
 .box6 {
     padding: 15px;
 }

 .box4p1 {
     text-align: center;
     color: #0d4ba0;
     font-size: 30px;
 }

 .box4p2 {
     text-align: center;
     color: black;
     margin-top: 15px;
 }

 .box5img img {
     width: 350px;
 }

 .box-title {
     color: #1a56a8;
     font-size: 18px;
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
     margin-bottom: 15px;
 }

 .item02 {
     margin-top: 15px;
 }

 .item02 p {
     text-align: center;
 }


 /* 两栏内容区域 */
 .box7 {
     grid-area: box7;
     padding: 15px;
 }

 .box7-1 {
     margin-top: 15px;
 }

 .box7Text1 {
     width: 100px;
     border: 1px solid black;
     background-color: #6ba4f4;
 }

 .box7Text1 p {
     text-align: center;
     color: black;
 }

 .box8 {
     grid-area: box8;
     padding: 15px;
 }

 .box-title {
     text-align: center;
 }

 /* 底部区域 */
 .box9 {
     grid-area: box9;
     padding: 20px;
     text-align: center;
     background-color: #f0f0f0;
     color: #666;
     font-size: 14px;
 }

 .footer-links {
     margin-bottom: 15px;
 }

 .footer-links a {
     color: #666;
     text-decoration: none;
     margin: 0 10px;
 }

 .footer-links a:hover {
     color: #1a56a8;
     text-decoration: underline;
 }

 /* 分割线 */
 .divider {
     height: 1px;
     background-color: #eee;
     margin: 15px 0;
 }

 /* 新增的tabs样式 */
 .tabs {
     width: 100%;
     margin: 15px 0;
     border: 1px solid #ddd;
     border-radius: 4px;
     overflow: hidden;
 }

 .tabs .nav {
     display: flex;
     background-color: #f8f8f8;
     border-bottom: 1px solid #ddd;
 }

 .tabs .nav span {
     padding: 12px 20px;
     cursor: pointer;
     position: relative;
     font-size: 16px;
     color: #333;
     text-align: center;
     flex: 1;
     transition: all 0.3s;
 }

 .tabs .nav span.active {
     background-color: #fff;
     color: #1a56a8;
     font-weight: bold;
     border-bottom: 2px solid #1a56a8;
 }

 .tabs .nav span b {
     display: none;
 }

 .tabs .nav span.active b {
     display: inline-block;
     position: absolute;
     bottom: -1px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-bottom: 6px solid #fff;
 }

 .tabs .ctx {
     padding: 15px;
     background-color: #fff;
 }

 .tabs .item {
     display: none;
 }

 .tabs .item.active {
     display: block;
 }

 .tabs .item h3 {
     color: #1a56a8;
     font-size: 18px;
     margin-bottom: 15px;
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
 }

 .tabs .item .txt {
     color: #333;
     line-height: 1.6;
     margin-bottom: 15px;
 }

 .tabs .item .txt p {
     margin-bottom: 10px;
 }

 .tabs .btn {
     text-align: center;
     margin: 20px 0;
 }

 .tabs .btn a {
     display: inline-block;
     padding: 8px 20px;
     background-color: #1a56a8;
     color: white;
     text-decoration: none;
     border-radius: 18px;
     transition: background-color 0.3s;
 }

 .tabs .btn a:hover {
     background-color: #0d4ba0;
 }

 .tabs .title {
     margin: 20px 0 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #eee;
     padding-bottom: 10px;
 }

 .tabs .title h2 {
     font-size: 16px;
     color: #333;
 }

 .tabs .title .txt {
     color: #1a56a8;
     text-decoration: none;
     font-weight: bold;
 }

 .tabs .title .more {
     color: #666;
     text-decoration: none;
     font-size: 14px;
 }

 .tabs .iconlist ul,
 .tabs .iconlist2 ul {
     display: flex;
     list-style: none;
     justify-content: space-between;
     margin-top: 15px;
 }

 .tabs .iconlist li,
 .tabs .iconlist2 li {
     flex: 1;
     text-align: center;
     padding: 0 5px;
 }

 .tabs .iconlist li a,
 .tabs .iconlist2 li a {
     display: block;
     color: #333;
     text-decoration: none;
     transition: all 0.3s;
 }

 .tabs .iconlist li a:hover,
 .tabs .iconlist2 li a:hover {
     color: #1a56a8;
 }

 .tabs .iconlist li img {
     width: 50px;
     height: 50px;
     margin-bottom: 5px;
 }

 .tabs .iconlist2 {
     margin: auto;
     width: 400px;
     border-radius: 18px;
 }

 .tabs .iconlist li span,
 .tabs .iconlist2 li span {
     display: block;
     font-size: 30px;
 }

 .tabs .iconlist2 li a {

     color: rgb(1, 82, 147);
     padding: 10px;
     background-color: #f5f5f5;
     border-radius: 4px;
     border: 1px solid #ddd;
 }

 .tabs .iconlist2 li a:hover {
     background-color: #e6f0ff;
     border-color: #1a56a8;
 }

 .box8Text1 {
     margin-top: 40px;
     display: float;
 }

 .box8Text2 {
     float: left;
 }

 .box8img {
     float: right;
 }